<template>
  <div class="self_adaption">
    <div class="g-container">
      <div class="other">
        <p class="main_text">售后管理</p>
      </div>
      <!-- 搜索 -->
      <div class="g-search" ref="searchBox">
        <!-- 时间选择区域 -->
        <div class="demo-date-picker">
          <div class="block">
            <span class="demonstration">申请时间：</span>
            <el-date-picker
              v-model="searchValue.startAt"
              type="date"
              placeholder="开始时间"
              @change="startTime"
              :clearable="false"
              :default-time="defaultTime(0, 0, 0)" />
            <span class="demonstration" style="display: inline-block; font-size: 12px; color: #898989; margin: 20px"
              >至</span
            >
            <el-date-picker
              v-model="searchValue.endAt"
              type="date"
              placeholder="结束时间"
              @change="endTime"
              :clearable="false"
              :default-time="defaultTime1(23, 59, 59)" />

            <el-radio-group v-model="radio" class="ml-4" @change="radioSelect">
              <el-radio label="1" size="large">今天</el-radio>
              <el-radio label="2" size="large">昨天</el-radio>
              <el-radio label="3" size="large">近三天</el-radio>
              <el-radio label="4" size="large">近一周</el-radio>
              <el-radio label="5" size="large">近一个月</el-radio>
              <el-radio label="6" size="large">近三个月</el-radio>
              <el-radio label="7" size="large">近一年</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 信息区域 -->
        <div class="all_select">
          <!-- 订单编号 -->
          <div class="input_valye">
            <span class="demonstration">订单编号：</span>
            <input type="text" class="input" placeholder="请输入订单编号" v-model="searchValue.orderSn"  @keyup.enter="search" />
          </div>
          <!-- 发票编号 -->
          <div class="input_valye">
            <span class="demonstration">售后编号：</span>
            <input type="text" class="input" placeholder="请输入售后编号" v-model="searchValue.afterSaleSn"  @keyup.enter="search" />
          </div>
          <!-- 售后方式 -->
          <div class="input_valye">
            <span class="demonstration">售后方式：</span>
            <el-select v-model="searchValue.type" class="m-2" placeholder="请选择售后类型" @change="search">
              <el-option v-for="item in type_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 底部按钮区域 -->
        <div class="bottom_btn">
          <el-button class="solid" @click="search">查询</el-button>
          <el-button class="hollow" @click="reset">重置</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <!-- 表格导航栏 -->
        <div class="nav">
          <ul class="nav_ul">
            <li v-for="(item, index) in nav_list" :key="index" :class="item.class" @click="navChange(item)">
              <span class="nav_lis">{{ item.text }}</span>
            </li>
          </ul>
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }"
          :show-overflow-tooltip="true"
          border>
          <el-table-column type="selection" width="40" />
          <el-table-column prop="afterSaleSn" label="售后编号" align="center" />
          <el-table-column prop="orderSn" label="订单编号" align="center" />
          <el-table-column prop="createAt" label="提交时间" align="center" />
          <el-table-column prop="updateAt" label="更新时间" align="center" />
          <el-table-column
            prop="type"
            label="售后方式"
            width="140"
            align="center"
            :formatter="(typeFormatter as any)" />
          <el-table-column
            prop="status"
            label="售后状态"
            width="120"
            align="center"
            :formatter="(statusFormatter as any)" />
          <el-table-column label="操作" width="200" class="operation">
            <template #default="item">
              <div class="table_btn">
                <el-button size="small" class="none" @click="dispose(item.row)" v-if="roleList.write">处理</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <smartPager
          v-model:current-page="searchValue.page"
          v-model:page-size="searchValue.rows"
          :total="total"
          @change="pageChange" />
      </div>
      <!-- 查看订单 -->
      <el-drawer v-model="orderShow" class="order" style="position: absolute !important; z-index: 40 !important">
        <div class="box fristbox">
          <div class="title">
            <div class="right">
              <!-- ************  退货退款  ************** -->
              <div v-if="typeShow == 0">
                <!-- ************  退货申请拒绝  ************** -->
                <el-steps
                  :active="statusShow + 1"
                  align-center
                  finish-status="success"
                  class="close"
                  v-if="statusShow == 2"
                  :status="statusShow == 2 ? 'error' : ''">
                  <el-step title="提交申请" />
                  <el-step title="商家已拒绝" :icon="CircleClose" :status="statusShow == 2 ? 'error' : ''" />
                </el-steps>
                <!-- ************  退货，审核拒绝收货  ************** -->
                <el-steps
                  :active="statusShow + 1"
                  align-center
                  finish-status="success"
                  class="close"
                  v-else-if="statusShow == 8">
                  <el-step title="提交申请" />
                  <el-step title="商家已同意" />
                  <el-step title="买家发货" />
                  <el-step title="商家审核，拒绝售后" :icon="CircleClose" :status="statusShow == 8 ? 'error' : ''" />
                </el-steps>
                <el-steps :active="statusShow + 1" align-center finish-status="success" v-else>
                  <el-step title="提交申请" />
                  <el-step title="商家已同意" v-if="statusShow > 0" />
                  <el-step title="等待商家同意" v-else />
                  <el-step title="买家发货" />
                  <el-step title="商家收货审核" :status="statusShow == 3 ? 'process' : ''" />
                  <el-step
                    title="售后完成"
                    :status="
                      statusShow == 3 ||
                      statusShow == 4 ||
                      statusShow == 5 ||
                      statusShow == 6 ||
                      statusShow == 7 ||
                      statusShow == 8
                        ? 'wait'
                        : statusShow == 9
                        ? 'process'
                        : ''
                    " />
                </el-steps>
              </div>
              <!-- ************  退款  ************** -->
              <div v-if="typeShow == 1">
                <!-- ************  退货申请拒绝  ************** -->
                <el-steps
                  :active="statusShow + 1"
                  align-center
                  finish-status="success"
                  class="close"
                  v-if="statusShow == 2"
                  :status="statusShow == 2 ? 'error' : ''">
                  <el-step title="提交申请" />
                  <el-step title="商家已拒绝" :icon="CircleClose" :status="statusShow == 2 ? 'error' : ''" />
                </el-steps>
                <el-steps :active="statusShow + 1" align-center finish-status="success" v-else>
                  <el-step title="提交申请" />
                  <el-step title="商家已同意" v-if="statusShow > 0" />
                  <el-step title="等待商家同意" v-else />
                  <el-step
                    title="退款中"
                    :status="
                      statusShow == 3 ||
                      statusShow == 4 ||
                      statusShow == 5 ||
                      statusShow == 6 ||
                      statusShow == 7 ||
                      statusShow == 8 ||
                      statusShow == 9
                        ? 'process'
                        : ''
                    " />
                  <el-step
                    title="售后完成"
                    :status="
                      statusShow == 3 ||
                      statusShow == 4 ||
                      statusShow == 5 ||
                      statusShow == 6 ||
                      statusShow == 7 ||
                      statusShow == 8 ||
                      statusShow == 9
                        ? 'wait'
                        : ''
                    " />
                </el-steps>
              </div>
              <!-- ************  换货  ************** -->
              <div v-if="typeShow == 2">
                <!-- ************  申请拒绝  ************** -->
                <el-steps
                  :active="statusShow + 1"
                  align-center
                  finish-status="success"
                  class="close"
                  v-if="statusShow == 2"
                  :status="statusShow == 2 ? 'error' : ''">
                  <el-step title="提交申请" />
                  <el-step title="商家已拒绝" :icon="CircleClose" />
                </el-steps>
                <!-- ************  退货，审核拒绝收货  ************** -->
                <el-steps
                  :active="statusShow + 1"
                  align-center
                  finish-status="success"
                  class="close"
                  v-else-if="statusShow == 8"
                  :status="statusShow == 8 ? 'error' : ''">
                  <el-step title="提交申请" />
                  <el-step title="商家已同意" v-if="statusShow > 0" />
                  <el-step title="等待商家同意" v-else />
                  <el-step title="买家发货" />
                  <el-step title="商家审核，拒绝售后" :icon="CircleClose" />
                </el-steps>
                <el-steps :active="statusShow + 1" align-center finish-status="success" v-else>
                  <el-step title="提交申请" />
                  <el-step title="商家已同意" v-if="statusShow > 0" />
                  <el-step title="等待商家同意" v-else />
                  <el-step title="买家发货" />
                  <el-step title="商家收货审核" :status="statusShow == 3 ? 'process' : ''" />
                  <el-step
                    title="商家发货"
                    description="已发货"
                    :status="statusShow == 3 ? 'wait' : statusShow == 4 ? 'process' : ''"
                    v-if="statusShow > 5" />
                  <el-step
                    title="商家发货"
                    description="待发货"
                    :status="statusShow == 3 ? 'wait' : statusShow == 4 ? 'process' : ''"
                    v-else />
                  <el-step
                    title="买家收货"
                    description="用户已收货"
                    :status="
                      statusShow == 4 || statusShow == 5 || statusShow == 7 || statusShow == 8
                        ? 'wait'
                        : statusShow == 6
                        ? 'process'
                        : statusShow == 9
                        ? 'finish'
                        : ''
                    "
                    v-if="statusShow > 6" />
                  <el-step
                    title="买家收货"
                    description="等待用户收货"
                    :status="
                      statusShow == 4 || statusShow == 5 || statusShow == 7 || statusShow == 8
                        ? 'wait'
                        : statusShow == 6
                        ? 'process'
                        : statusShow == 9
                        ? 'finish'
                        : ''
                    "
                    v-else />
                </el-steps>
              </div>
              <!-- ************  换货  ************** -->
              <!-- 待处理，商家审核 -->
              <div class="text" v-show="statusShow == 0">
                <div class="shop">
                  待处理，商家审核
                  <p class="plat_mes" @click="sendMes">
                    <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                  </p>
                </div>
                <p class="text1">
                  买家申请售后 <span class="time">01</span>天<span class="time">15</span
                  >小时&nbsp;&nbsp;内处理，超时可能会判罚
                </p>
                <div class="btn1">
                  <el-button class="solid" @click="agree">同意</el-button>
                  <el-button class="hollow" @click="exchangeRefuse">拒绝</el-button>
                </div>
              </div>
              <!-- 退款申请已拒绝 -->
              <div class="text" v-show="typeShow == 2 && statusShow == 2">
                <div class="shop">
                  换货申请已拒绝
                  <p class="plat_mes" @click="sendMes">
                    <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                  </p>
                </div>
                <p class="text1">原因：{{ cause }}</p>
              </div>
              <!-- 买家已发货 -->
              <div class="text" v-show="typeShow == 2 && statusShow == 3">
                <div class="shop">
                  商家收货审核商品
                  <p class="plat_mes" @click="sendMes">
                    <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                  </p>
                </div>
                <p class="text1">
                  买家已发货，商家请在<span class="time">01</span>天<span class="time">15</span>小时<span class="time"
                    >36</span
                  >分钟&nbsp;&nbsp;内收货并确认商品信息，超时可能会判罚
                </p>
                <div class="btn1">
                  <el-button class="solid" @click="agree">审核通过</el-button>
                  <el-button class="hollow" @click="exchangeRefuse">拒绝换货</el-button>
                </div>
              </div>
              <!-- 等待商家换货发货 -->
              <div class="text" v-show="typeShow == 2 && statusShow == 4">
                <div class="shop">
                  等待商家换货发货
                  <p class="plat_mes" @click="sendMes">
                    <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                  </p>
                </div>
                <p class="text1">
                  商家请在请在 <span class="time">01</span>天<span class="time">15</span
                  >小时&nbsp;&nbsp;内发货商品，超时可能会判罚
                </p>
                <div class="btn1">
                  <el-button class="solid" @click="deliverAll">发货</el-button>
                </div>
              </div>
              <!-- 卖家已发货 -->
              <div class="text" v-show="typeShow == 2 && statusShow == 6">
                <div class="shop">
                  等待买家收货
                  <p class="plat_mes" @click="sendMes">
                    <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                  </p>
                </div>
                <p class="text1">
                  商家已发货，订单将在 <span class="time">01</span>天<span class="time">15</span>小时<span class="time"
                    >36</span
                  >分钟&nbsp;&nbsp;内自动确认收货
                </p>
              </div>
              <!-- 售后完成 -->
              <div class="text" v-show="statusShow == 10">
                <div class="shop">
                  售后完成
                  <p class="plat_mes" @click="sendMes">
                    <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                  </p>
                </div>
              </div>
              <!-- ************  退货  ************** -->
              <!-- 退款申请已拒绝 -->
              <div class="text" v-if="(typeShow == 0 || typeShow == 1) && statusShow == 2">
                <div class="shop">
                  退款申请已拒绝
                  <p class="plat_mes" @click="sendMes">
                    <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                  </p>
                </div>
                <p class="text1">原因：{{ cause }}</p>
              </div>
              <!-- 等待买家退货 -->
              <div class="text" v-if="(typeShow == 0 || typeShow == 2) && statusShow == 1">
                <div class="shop">
                  等待买家退货
                  <p class="plat_mes" @click="sendMes">
                    <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                  </p>
                </div>
                <p class="text1">
                  买家将在<span class="time">01</span>天<span class="time">15</span>小时<span class="time">36</span
                  >分钟&nbsp;&nbsp;内退货，超时将会关闭此售后
                </p>
              </div>
              <!-- 商家确认收货并审核退款 -->
              <div class="text" v-if="typeShow == 0 && statusShow == 3">
                <div class="shop">
                  商家确认收货并审核退款
                  <p class="plat_mes" @click="sendMes">
                    <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                  </p>
                </div>
                <p class="text1">
                  买家已发货，商家请在<span class="time">01</span>天<span class="time">15</span>小时<span class="time"
                    >36</span
                  >分钟&nbsp;&nbsp;内收货并确认商品信息，超时可能判罚
                </p>
                <div class="btn1">
                  <el-button
                    class="solid"
                    @click="agreeRefund"
                    :loading="agreeRefundLoading"
                    :disabled="agreeRefundLoading"
                    >确认收货并退款</el-button
                  >
                  <el-button class="hollow" @click="exchangeRefuse">拒绝售后</el-button>
                </div>
              </div>
              <!-- 商家已拒绝继续售后 -->
              <div class="text" v-if="(typeShow == 1 || typeShow == 2) && statusShow == 8">
                <div class="shop">
                  商家已拒绝继续售后
                  <p class="plat_mes" @click="sendMes">
                    <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                  </p>
                </div>
                <p class="text1">原因：{{ cause }}</p>
              </div>
              <!-- 商家确认退款 -->
              <div class="text" v-if="typeShow == 1 && statusShow == 9">
                <div class="shop">
                  商家确认退款
                  <p class="plat_mes" @click="sendMes">
                    <el-icon> <Message /> </el-icon>&nbsp;&nbsp;发消息
                  </p>
                </div>
                <p class="text1">
                  商家已同意退款，请在<span class="time">01</span>天<span class="time">15</span>小时<span class="time"
                    >36</span
                  >分钟&nbsp;&nbsp;内处理，超时可能会判罚
                </p>
                <div class="btn1">
                  <el-button class="solid" @click="agreeRefund">退款</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 售后信息 -->
        <div class="box">
          <div class="user_play">
            <div class="title">
              <div class="box1"></div>
              <span class="name">售后信息</span>
            </div>
            <div class="row">
              <span class="name1">售后编号：{{ afterSale.afterSaleSn }}</span>
            </div>
            <div class="row">
              <span class="name1">申请时间：{{ afterSale.createAt }}</span>
            </div>
            <div class="row">
              <span class="name1"
                >售后方式：<span v-if="afterSale.type == 0">退货退款</span><span v-if="afterSale.type == 1">退款</span
                ><span v-if="afterSale.type == 2">换货</span></span
              >
            </div>
            <div class="row">
              <span class="name1">售后金额：{{ afterSale.salePrice }}</span>
            </div>
          </div>
          <div class="user_play">
            <div class="title">
              <div class="box1"></div>
              <span class="name">订单信息</span>
            </div>
            <div class="row">
              <span class="name1">订单编号：{{ orderArray.orderSn }}</span>
            </div>
            <div class="row">
              <span class="name1">联系人：{{ user.username }}</span>
            </div>
            <div class="row">
              <span class="name1">联系电话：{{ user.phone }}</span>
            </div>
          </div>
        </div>
        <!-- 物流信息 -->
        <div class="box" v-if="logistics.length != 0">
          <div class="head_title">
            <div class="box1"></div>
            物流信息
          </div>
          <!-- 表格区域 -->
          <el-table
            :data="logistics"
            style="width: 100%"
            :show-overflow-tooltip="true"
            :header-cell-style="{
              'text-align': 'center',
              background: '#F2F7FC !important',
            }">
            <el-table-column type="expand">
              <template #default="item">
                <div class="logistics">
                  <el-timeline>
                    <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time">
                      {{ activity.context }}
                    </el-timeline-item>
                  </el-timeline>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="company" label="物流公司" align="center" />
            <el-table-column prop="logisticSn" label="物流单号" align="center" />
            <el-table-column prop="status" label="物流状态" align="center">
              <template #default="item">
                <span v-if="item.row.status == 0">已发货</span>
                <span v-else>已签收</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 发票信息 -->
        <div class="box" v-if="invoice.length != 0">
          <div class="head_title">
            <div class="box1"></div>
            发票信息
          </div>
          <!-- 表格区域 -->
          <el-table
            :data="invoice"
            style="width: 100%"
            :show-overflow-tooltip="true"
            :header-cell-style="{
              'text-align': 'center',
              background: '#F2F7FC !important',
            }">
            <el-table-column prop="type" label="发票类型" width="100" align="center" />
            <el-table-column prop="riseType" label="发票抬头类型" width="160" align="center" />
            <el-table-column prop="invoiceHeader" label="发票类型" width="100" align="center" />
            <el-table-column prop="content" label="发票内容" width="100" align="center" />
            <el-table-column prop="phone" label="收票人手机" width="100" align="center" />
            <el-table-column prop="email" label="收票人邮箱" width="100" align="center" />
          </el-table>
        </div>
        <!-- 商品信息 -->
        <div class="box">
          <div class="head_title">
            <div class="box1"></div>
            商品信息
          </div>
          <!-- 表格区域 -->
          <el-table
            :data="product"
            style="width: 100%"
            :show-overflow-tooltip="true"
            :header-cell-style="{
              'text-align': 'center',
              background: '#F2F7FC !important',
            }">
            <el-table-column prop="pic" label="商品图片" width="100" align="center">
              <template #default="item">
                <img :src="item.row.pic" alt="" style="width: 100px; height: 100px" />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="商品名称" width="160" align="center" />
            <el-table-column prop="salePrice" label="售价" width="100" align="center" />
            <el-table-column prop="dealPrice" label="成交价" width="100" align="center" />
            <el-table-column prop="buyCount" label="下单数量" width="100" align="center" />
            <el-table-column prop="productQuantity" label="售后数量" width="100" align="center" />
            <el-table-column prop="skuCode" label="属性" width="100" align="center" />
            <el-table-column prop="price" label="商品总金额" width="100" align="center" />
            <el-table-column prop="refundPrice" label="售后金额" width="100" align="center" />
            <el-table-column prop="description" label="售后描述" width="100" align="center" />
            <el-table-column prop="mainImgUrl" label="售后图片" width="100" align="center">
              <template #default="item">
                <el-image
                  v-for="(it, index) in item.row.mainImgUrl"
                  :key="index"
                  :preview-src-list="item.row.mainImgUrl"
                  :src="it"
                  style="width: 100px; height: 100px" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 费用信息 -->
        <div class="box">
          <div class="head_title">
            <div class="box1"></div>
            费用信息
          </div>
          <!-- 表格区域 -->
          <el-table
            :data="cost"
            style="width: 100%"
            :show-overflow-tooltip="true"
            :header-cell-style="{
              'text-align': 'center',
              background: '#F2F7FC !important',
            }">
            <el-table-column prop="price" label="订单合计" align="center" />
            <el-table-column prop="districtMoney" label="优惠金额" width="100" align="center" />
            <el-table-column prop="refundPrice" label="实际应退金额" align="center" />
          </el-table>
        </div>
        <!-- 操作信息 -->
        <div class="box">
          <div class="head_title">
            <div class="box1"></div>
            操作信息
          </div>
          <!-- 表格区域 -->
          <el-table
            :data="logs"
            style="width: 100%"
            :show-overflow-tooltip="true"
            :header-cell-style="{
              'text-align': 'center',
              background: '#F2F7FC !important',
            }">
            <el-table-column prop="adminId" label="操作者" align="center" />
            <el-table-column prop="operateAt" label="操作时间" align="center" />
            <el-table-column prop="afterStatus" label="订单状态" align="center">
              <template #default="item">
                <span v-if="item.status == '0'">等待商家审核</span>
                <span v-else-if="item.status == '1'">商家已同意</span>
                <span v-else-if="item.status == '2'">商家已拒绝</span>
                <span v-else-if="item.status == '3'">等待商家收货</span>
                <span v-else-if="item.status == '4'">商家已收货</span>
                <span v-else-if="item.status == '5'">商家待发货</span>
                <span v-else-if="item.status == '6'">商家已发货</span>
                <span v-else-if="item.status == '7'">您已收货</span>
                <span v-else-if="item.status == '8'">商家拒绝售后</span>
                <span v-else-if="item.status == '9'">退款中</span>
                <span v-else>售后已完成</span>
              </template>
            </el-table-column>
            <el-table-column prop="note" label="备注" width="100" align="center">
              <template #default="item">
                <span v-if="item.row.note == ''">-</span>
                <span v-else>{{ item.row.note }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-drawer>
      <!-- 售后换货，发货信息 -->
      <div class="deliver" v-if="deliverShow">
        <div class="title1">
          <div class="title_mes">
            <el-icon size="20" color="#fff"> <Edit /> </el-icon>&nbsp;售后换货
          </div>
          <span class="close" @click="maskBtn1">✖</span>
        </div>
        <div class="content1">
          <div class="mes_title">售后发货信息</div>
          <!-- 表格区域 -->
          <el-table
            :data="delivereData"
            style="width: 100%"
            :show-overflow-tooltip="true"
            :header-cell-style="{
              'text-align': 'center',
              background: '#F2F7FC !important',
            }">
            <el-table-column prop="afterSaleSn" label="售后编号" align="center" width="200"></el-table-column>
            <el-table-column prop="receiver" label="收货人" align="center" width="100"></el-table-column>
            <el-table-column prop="phone" label="手机号" align="center" width="140"></el-table-column>
            <el-table-column prop="area" label="地址" align="center" width="280"></el-table-column>
            <el-table-column prop="address" label="详细地址" align="center" width="280"></el-table-column>
          </el-table>
        </div>
        <!-- 按钮区域 -->
        <div class="btn_center">
          <el-button class="hollow" @click="maskBtn1">取消</el-button>
          <el-button class="solid" @click="deliverSure1" :loading="loading" :disabled="loading">确定</el-button>
        </div>
      </div>
      <!-- 拒绝退款 -->
      <div class="refuse_refund" v-if="refuseRefundShow">
        <div class="title1" style="background: #fff; color: #000">
          <div class="title_mes">
            <el-icon size="20" color="#fff"> <Edit /> </el-icon>&nbsp;是否确认拒绝退款
          </div>
          <span class="close" @click="maskBtn1">✖</span>
        </div>
        <div class="content1">
          <div class="mes">
            <span class="text">请填写拒绝原因&nbsp;&nbsp;</span>
            <el-input v-model="cause" placeholder="请输入标题" />
          </div>

          <div class="btn">
            <el-button class="hollow" @click="deliverCancle">取消</el-button>
            <el-button class="solid" @click="deliverSure" :loading="loading" :disabled="loading">确定</el-button>
          </div>
        </div>
      </div>
      <!-- 拒绝换货 -->
      <div class="refuse_change" v-if="refuseChangeShow">
        <div class="title1" style="background: #fff; color: #000">
          <div class="title_mes">
            <el-icon size="20" color="#fff"> <Edit /> </el-icon>&nbsp;是否拒绝换货
          </div>
          <span class="close" @click="maskBtn1">✖</span>
        </div>
        <div class="content1">
          <div class="mes">
            <span class="text">标题：&nbsp;&nbsp;</span>
            <el-input placeholder="请输入标题" v-model="cause" />
          </div>

          <div class="btn">
            <el-button class="hollow" @click="deliverCancle">取消</el-button>
            <el-button class="solid" @click="deliverSure" :loading="loading" :disabled="loading">确定</el-button>
          </div>
        </div>
      </div>
      <!-- 退货拒绝售后 -->
      <div class="refuse_aftersale" v-if="refuseAftersaleShow">
        <div class="title1" style="background: #fff; color: #000">
          <div class="title_mes">
            <el-icon size="20" color="#fff"> <Edit /> </el-icon>&nbsp;是否拒绝售后
          </div>
          <span class="close" @click="maskBtn1">✖</span>
        </div>
        <div class="content1">
          <div class="mes">
            <span class="text">请输入拒绝原因：&nbsp;&nbsp;</span>
            <el-input placeholder="请输入标题" />
          </div>

          <div class="btn">
            <el-button class="hollow">取消</el-button>
            <el-button class="solid">确定</el-button>
          </div>
        </div>
      </div>
      <!-- 退款 -->
      <div class="refund" v-if="refundShow">
        <div class="title1" style="background: #fff; color: #000">
          <div class="title_mes">
            <el-icon size="20" color="#fff"> <Edit /> </el-icon>&nbsp;退款
          </div>
          <span class="close" @click="maskBtn1">✖</span>
        </div>
        <div class="content1">
          <el-form :model="cost1" label-width="100px" label-position="left">
            <el-form-item label="退款方式:" prop="name">
              <el-radio-group v-model="radio" class="ml-4">
                <el-radio label="1" size="large">全额退款</el-radio>
                <el-radio label="2" size="large">差额退款</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="退款金额:" prop="name">
              <el-input class="form_input" />
            </el-form-item>
            <el-form-item label="退款说明:" prop="name">
              <el-input type="textarea" class="form_input" />
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button class="hollow">取消</el-button>
            <el-button class="solid">确定</el-button>
          </div>
        </div>
      </div>
      <!-- 遮罩层 -->
      <div id="mask1" v-if="mask" @click="maskBtn1"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, onBeforeUnmount} from 'vue';
import {Edit} from '@element-plus/icons-vue';
import {
  RequestAfterSaleDetal,
  RequestAfterSaleSearch,
  RequestSendSiteMes,
  RequestAfterSaleStatus,
  RequestShopHomepageStatus,
  RequestSendGoodsToUser,
  RequestRefundToUser,
} from '@/api/path/index.js';
import {Message, CircleClose} from '@element-plus/icons-vue';
import moment from 'moment';
import {ElMessage} from 'element-plus';
import {useRouter} from 'vue-router';
import useAuthorize from '@/hooks/authorize';
let roleList = useAuthorize();
const router = useRouter();

onMounted(() => {
  if (window.location.search.split('=')[1] != undefined) {
    for (let i = 0; i < nav_list.value.length; i++) {
      const filteredClasses = nav_list.value[i].class.filter((className) => className !== 'navlist');
      nav_list.value[i].class = filteredClasses;
    }
    nav_list.value[Number(window.location.search.split('=')[1])].class.push('navlist');
    searchValue.value.status = nav_list.value[Number(window.location.search.split('=')[1])].status;
  }
  rquestAfterSale();
  handleResize();
  window.addEventListener('resize', handleResize);
});
const searchBox = ref();
const tablelistHeight = ref();
const handleResize = () => {
  const searchBoxHeight = searchBox.value.clientHeight;
  tablelistHeight.value = 110 + searchBoxHeight + 'px';
  console.log('Search Box height11111111111111111111111111111:', searchBoxHeight);
};

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});
const defaultTime = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
const defaultTime1 = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
const radio = ref('0'); //单选按钮
const total = ref(0); //发票总数
const tableData = ref([]); //发票数组
const deliverShow = ref(false); //控制换货发货显示
const mask = ref(false); //控制遮罩层显示
const refuseChangeShow = ref(false); //控制拒绝换货显示
const refuseAftersaleShow = ref(false); //控制拒绝售后显示
const refundShow = ref(false); //控制退款显示
const refuseRefundShow = ref(false); //控制拒绝退款显示
const orderShow = ref(false); //控制处理售后显示
const plateformShow = ref(false); //控制站内信息显示
const sendStieMes = ref({
  subject: '',
  message: '',
});
const shopId = Number(localStorage.getItem('ShopId'));

/**
 * 表格导航列表
 */
const nav_list = ref([
  {
    class: ['navlist', 'nav_li'],
    text: '全部',
    status: [],
    num: 0,
  },
  {
    class: ['nav_li'],
    text: '待处理',
    status: [0],
    num: 0,
  },
  {
    class: ['nav_li'],
    text: '处理中',
    status: [1, 3, 4, 5, 6, 7, 9],
    num: 0,
  },
  {
    class: ['nav_li'],
    text: '已完成',
    status: [10],
    num: 0,
  },
  {
    class: ['nav_li'],
    text: '已拒绝',
    status: [2, 8],
    num: 0,
  },
]);
/**
 * 获取售后信息
 */
const rquestAfterSale = async () => {
  const a = await RequestAfterSaleSearch(searchValue.value);
  tableData.value = a.resultObj.afterSales;
  total.value = a.resultObj.totalCount;
  console.log('总数', total.value);
};

/**
 * 表格导航点击事件
 */
const navChange = (item: any) => {
  for (let i = 0; i < nav_list.value.length; i++) {
    const filteredClasses = nav_list.value[i].class.filter((className) => className !== 'navlist');
    nav_list.value[i].class = filteredClasses;
  }
  console.log('1111111', item.status);

  searchValue.value.status = item.status;
  searchValue.value.page = 1;
  item.class.push('navlist');
  rquestAfterSale();
};
/**
 * 表格颜色区分
 */
const tableRowClassName = ({row, rowIndex}: any) => {
  if (rowIndex % 2 !== 0) {
    return 'warning-row';
  }
};
/**
 * 搜索值
 */

const searchValue = ref<any>({
  startAt: '',
  endAt: '',
  orderSn: '',
  afterSaleSn: '',
  type: '',
  status: [],
  page: 1,
  rows: 10,
  shopId: shopId,
});
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    startAt: '',
    endAt: '',
    orderSn: '',
    afterSaleSn: '',
    type: '',
    status: [],
    page: 1,
    rows: 10,
    shopId: shopId,
  };
  rquestAfterSale();
  radio.value = '';
  nav_list.value.forEach((item) => {
    item.class = ['nav_li'];
  });
  nav_list.value[0].class = ['navlist', 'nav_li'];
};
// 开始时间
const startTime = () => {
  searchValue.value.startAt.setHours(0);
  searchValue.value.startAt.setMinutes(0);
  searchValue.value.startAt.setSeconds(0);
  searchValue.value.startAt = moment(searchValue.value.startAt).format('yyyy-MM-DD HH:mm:ss');
  radio.value = '0';
  search()
};
// 结束时间
const endTime = () => {
  searchValue.value.endAt.setHours(23);
  searchValue.value.endAt.setMinutes(59);
  searchValue.value.endAt.setSeconds(59);
  searchValue.value.endAt = moment(searchValue.value.endAt).format('yyyy-MM-DD HH:mm:ss');
  radio.value = '0';
  search()
};
/**
 * 时间范围单选按钮
 */
const radioSelect = () => {
  searchValue.value.startAt = '';
  searchValue.value.endAt = '';
  var now = new Date();
  now.setHours(0);
  now.setMinutes(0);
  now.setSeconds(0);
  var now1 = new Date();
  now1.setHours(23);
  now1.setMinutes(59);
  now1.setSeconds(59);
  if (radio.value == '1') {
    searchValue.value.startAt = moment(now).format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value == '2') {
    searchValue.value.startAt = moment(now).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value == '3') {
    searchValue.value.startAt = moment(now).subtract(3, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value == '4') {
    searchValue.value.startAt = moment(now).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value == '5') {
    searchValue.value.startAt = moment(now).subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value == '6') {
    searchValue.value.startAt = moment(now).subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else {
    searchValue.value.startAt = moment(now).subtract(1, 'years').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  }
  search()
};
/**
 * 搜索点击事件
 */
const search = async () => {
  if (moment(searchValue.value.startAt).diff(moment().format('YYYY-MM-DD HH:mm:ss')) >= 0) {
    ElMessage.error('开始时间不能晚于当前日期');
    searchValue.value.startAt = '';
  } else {
    console.log('搜索1', searchValue.value);
    // 判断是否两个时间都填写了
    if (searchValue.value.startAt !== '' && searchValue.value.endAt !== '') {
      // 判断开始时间不能晚于结束时间
      if (moment(searchValue.value.startAt).diff(moment(searchValue.value.endAt)) <= 0) {
        searchValue.value.page = 1;
        rquestAfterSale();
      } else {
        ElMessage.error('结束时间不能早于开始时间');
        searchValue.value.endAt = '';
      }
    } else {
      searchValue.value.page = 1;
      rquestAfterSale();
    }
  }
};
/**
 * 发送站内信
 */
const sendMes = () => {
  console.log(user.value.id);
  router.push('/Service/call_center?id=U' + user.value.id);
};
const cause = ref('');
/**
 * 拒绝开始申请
 */
const exchangeRefuse = () => {
  cause.value = '';
  if (typeShow.value == 1) {
    refuseRefundShow.value = true;
    mask.value = true;
  } else {
    refuseChangeShow.value = true;
    mask.value = true;
  }
};
/**
 * 拒绝申请确认按钮
 */
const deliverSure1 = () => {
  clearTimeout(timer);
  timer = setTimeout(async () => {
    loading.value = true;
    const a = await RequestSendGoodsToUser({afterId: afterSale.value.id});
    console.log('111111111111111', afterSale.value);
    if (a.msg == '操作成功！') {
      ElMessage.success('发货成功！');
      statusShow.value = a.resultObj;
      loading.value = false;
    } else {
      ElMessage.error('操作失败！');
      loading.value = false;
    }
  }, 500);
};
let loading = ref(false); //设置记录时间，用于防抖
let timer = ref(); //设置记录时间，用于防抖
// 拒绝退款。拒绝换货
const deliverSure = () => {
  clearTimeout(timer.value);
  timer.value = setTimeout(async () => {
    loading.value = true;
    const a = {
      result: 0,
      text: cause.value,
      adminId: 1,
      afterSaleSn: afterSale.value.afterSaleSn,
      type: afterSale.value.type,
      status: afterSale.value.status,
    };
    const send = await RequestAfterSaleStatus(a);
    if (send.msg == '操作成功！') {
      maskBtn1();
      rquestAfterSale();
      refuseRefundShow.value = false;
      mask.value = false;
      refuseChangeShow.value = false;
      ElMessage.success('发送成功');
      statusShow.value = send.resultObj;
      loading.value = false;
      orderShow.value = false;
    } else {
      ElMessage.error('发送失败');
      loading.value = false;
    }
  }, 500);
};
/**
 * 拒绝申请取消按钮
 */
const deliverCancle = () => {
  refuseRefundShow.value = false;
  mask.value = false;
  refuseChangeShow.value = false;
};
/**
 * 申请同意按钮
 */
const agreeRefundLoading = ref(false);
const agreeRefund = async () => {
  agreeRefundLoading.value = true;
  console.log('545444554', afterSale.value);
  const a = await RequestRefundToUser(afterSale.value.afterSaleSn);
  if (a.msg == '操作成功！') {
    plateformShow.value = false;
    mask.value = false;
    ElMessage.success('操作成功！');
    statusShow.value = a.resultObj;
    agreeRefundLoading.value = false;
  } else {
    ElMessage.error('操作失败！');
    agreeRefundLoading.value = false;
  }
};
/**
 * 申请同意按钮
 */
const agree = async () => {
  const a = await RequestAfterSaleStatus({
    result: 1,
    text: cause.value,
    adminId: 1,
    afterSaleSn: afterSale.value.afterSaleSn,
    type: afterSale.value.type,
    status: afterSale.value.status,
  });
  if (a.msg == '操作成功！') {
    plateformShow.value = false;
    mask.value = false;
    ElMessage.success('发送成功');
    statusShow.value = a.resultObj;
  } else {
    ElMessage.error('发送失败');
  }
};
/**
 * 换货发货
 */
const deliverAll = () => {
  deliverShow.value = true;
  mask.value = true;
  const deliverMes = JSON.parse(orderArray.value.addressInfo.value);
  delivereData.value = [
    {
      afterSaleSn: afterSale.value.afterSaleSn,
      receiver: deliverMes.receiver,
      phone: deliverMes.phone,
      area: deliverMes.area,
      address: deliverMes.address,
    },
  ];
  console.log('发货信息', deliverMes);
};
/**
 * 遮罩层数据
 */
const afterSale = ref<any>([]); //售后信息
const logistics = ref<any>([]); //物流信息
const orderArray = ref<any>([]); //订单信息
const product = ref<any>([]); //产品信息
const user = ref<any>([]); //用户信息
const typeShow = ref(0); //售后形式数字
const afterSaleType = ref(''); //售后形式中文
const statusShow = ref(0); //售后状态
const cost = ref<any>([]); //费用信息
const productUrl = ref(''); //商品照片
const invoice = ref<any>([]); //发票信息
const logs = ref<any>([]); //操作记录
const cost1 = ref({
  orderId: 0,
  type: 0,
  adminId: 1,
  price: '',
  transportFee: '',
  districtMoney: '',
  reality: '',
  note: '',
});
const activities = ref<any>([]); //时间线
/**
 * 点击处理
 */
const dispose = async (item: any) => {
  // 显示组件
  orderShow.value = true;
  // 获取所有信息
  const a = await RequestAfterSaleDetal(item.id);
  console.log('测试', a.resultObj);
  cause.value = a.resultObj.refuseReason;
  // 处理物流信息
  afterSale.value = a.resultObj.afterSale;
  logistics.value = a.resultObj.logistics;
  orderArray.value = a.resultObj.order;
  // 处理商品费用
  cost.value = [
    {
      price: 0,
      districtMoney: 0,
      refundPrice: 0,
    },
  ];
  for (let i = 0; i < a.resultObj.afterSaleProducts.length; i++) {
    product.value[i] = {
      pic: '',
      mainImgUrl: a.resultObj.afterSaleProducts[i].imgs,
      name: a.resultObj.afterSaleProducts[i].product.name,
      salePrice: a.resultObj.afterSaleProducts[i].product.salePrice,
      dealPrice: a.resultObj.afterSaleProducts[i].orderProduct.finalPrice,
      buyCount: a.resultObj.afterSaleProducts[i].orderProduct.quantity,
      productQuantity: a.resultObj.afterSaleProducts[i].quantity,
      skuCode: a.resultObj.afterSaleProducts[i].skuName,
      price: a.resultObj.afterSaleProducts[i].orderProduct.finalPrice * a.resultObj.afterSaleProducts[i].quantity,
      reason: a.resultObj.afterSaleProducts[i].reason,
      refundPrice: a.resultObj.afterSaleProducts[i].refundPrice,
      description: a.resultObj.afterSaleProducts[i].description,
    };
    cost.value[0].price += product.value[i].price;
    cost.value[0].refundPrice += product.value[i].refundPrice;
    if (a.resultObj.afterSaleProducts[i].product.pics.length != 0) {
      product.value[i].pic = a.resultObj.afterSaleProducts[i].product.pics[0].url;
    }
  }
  console.log('商品信息11111', product.value);
  orderArray.value.salePrice = cost.value[0].refundPrice;
  user.value = a.resultObj.user;
  // 判断是否有发票信息
  if (a.resultObj.invoice !== null) {
    invoice.value = [
      {
        type: a.resultObj.invoice.type,
        riseType: a.resultObj.invoice.riseType,
        invoiceHeader: a.resultObj.invoice.invoiceHeader,
        content: '商品明细',
        phone: a.resultObj.invoice.phone,
        email: a.resultObj.invoice.email,
      },
    ];
    // 处理发票信息回显发票类型
    if (a.resultObj.invoice.type == 0) {
      invoice.value[0].type = '普票';
    } else {
      invoice.value[0].type = '专票';
    }
    if (a.resultObj.invoice.riseType == 0) {
      invoice.value[0].riseType = '个人';
    } else {
      invoice.value[0].riseType = '单位';
    }
  } else {
    invoice.value = [];
  }
  // 判断是否有物流信息
  if (a.resultObj.logistics !== null) {
    logistics.value = [
      {
        company: a.resultObj.logistics.company,
        logisticSn: a.resultObj.logistics.logisticSn,
        status: a.resultObj.logistics.status,
      },
    ];
  } else {
    logistics.value = [];
  }
  console.log('物流信息', logistics.value);

  statusShow.value = afterSale.value.status;
  typeShow.value = afterSale.value.type;
  productUrl.value = a.resultObj.productUrl;
  // 处理售后方式
  if (afterSale.value.type == 0) {
    afterSaleType.value = '退货退款';
  } else if (afterSale.value.type == 1) {
    afterSaleType.value = '退款';
  } else {
    afterSaleType.value = '换货';
  }
  console.log('售后信息', afterSale.value);

  orderArray.value.receiver = a.resultObj.receiver;
  orderArray.value.receiverAddress = a.resultObj.receiverAddress;
  // 处理物流信息
  if (a.resultObj.transportInfo !== null) {
    // console.log(a.resultObj.transportInfo);
    // transportInfo.value = JSON.parse(
    //   a.resultObj.transportInfo.replace(", error=null)", " ")
    // );
    activities.value = JSON.parse(a.resultObj.transportInfo).data;
    console.log('物流记录', JSON.parse(a.resultObj.transportInfo).data);
  }

  console.log('打印', a.resultObj);

  console.log('商品费用', cost.value);

  cost1.value = {
    orderId: orderArray.value.id,
    type: 0,
    adminId: 1,
    price: cost.value[0].price,
    transportFee: cost.value[0].transportFee,
    districtMoney: cost.value[0].districtMoney,
    reality: cost.value[0].reality,
    note: cost.value[0].note,
  };
  // 操作记录
  logs.value = a.resultObj.logs;
};
/**
 * 通过返回的status返回对应的状态
 */
const statusFormatter = (row: any) => {
  if (row.status == 0) {
    return '提交申请';
  }
  if (row.status == 1) {
    return '同意申请';
  }
  if (row.status == 2) {
    return '拒绝申请';
  }
  if (row.status == 3) {
    return '买家已发货';
  }
  if (row.status == 4) {
    return '卖家已收货';
  }
  if (row.status == 5) {
    return '卖家待发货';
  }
  if (row.status == 6) {
    return '卖家已发货';
  }
  if (row.status == 7) {
    return '买家已收货';
  }
  if (row.status == 8) {
    return '卖家已拒绝';
  }
  if (row.status == 9) {
    return '退款中';
  }
  if (row.status == 10) {
    return '售后完成';
  }
};
/**
 * 通过返回的type返回对应的类型
 */
const typeFormatter = (row: any) => {
  if (row.type == 0) {
    return '退货退款';
  }
  if (row.type == 1) {
    return '退款';
  }
  if (row.type == 2) {
    return '换货';
  }
};
const delivereData = ref<any>([]); // 退货发货表格列表

/**
 * 售后形式选择器
 */
const type_options = [
  {
    value: 0,
    label: '退货退款',
  },
  {
    value: 1,
    label: '退款',
  },
  {
    value: 2,
    label: '换货',
  },
];
/**
 * 分页
 */
const pageChange = async (val: number) => {
  rquestAfterSale();
};
/**
 * 遮罩层点击事件
 */
const maskBtn1 = () => {
  mask.value = false;
  deliverShow.value = false;
  refuseChangeShow.value = false;
  refundShow.value = false;
  refuseRefundShow.value = false;
  plateformShow.value = false;
  loading.value = false;
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.nav_ul {
  width: 100%;

  .nav_li {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav_lis {
    position: relative;
    cursor: pointer;

    .number {
      padding: 0 5px;
      display: block;
      line-height: 16px;
      height: 16px;
      color: #fff;
      font-size: 12px;
      background: #409eff;
      border-radius: 8px;
      position: absolute;
      top: 2px;
      right: -12px;
    }
  }

  .navlist {
    .number {
      background: #409eff;
      color: #fff;
    }
  }
}

.look_invoice {
  width: 50%;
  height: 60%;
  position: fixed;
  top: 20%;
  left: 25%;
  z-index: 99;
  background: #fff;
  overflow: scroll;

  .good_mes {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #116cf8;
    color: #fff;

    .mes {
      margin-left: 40px;
    }

    .cancle {
      margin-right: 40px;
    }
  }

  .form {
    padding: 10px 40px;
  }
}

.table {
  height: calc(100% - v-bind(tablelistHeight)) !important;
}

::v-deep .el-table--fit {
  height: calc(100% - 120px) !important;
}

.table :deep(.el-table__cell) {
  text-align: center;
}

.el-table .warning-row {
  background: #f2f7fc;
}

::deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
  z-index: initial !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  z-index: initial !important;
}

:deep(.el-drawer.rtl) {
  background: #f5f9ff;
  width: 800px !important;
}

:deep(.el-overlay) {
  z-index: 40 !important;
  padding: static;
}

:deep(.el-drawer__header) {
  margin: 0;
}

:deep(.is-process) {
  color: #409eff;
}

:deep(.is-process .el-step__icon.is-text) {
  border: 2px solid #409eff;
  background: #409eff;
  color: #fff;
}

:deep(.is-finish .el-step__line) {
  background: #409eff;
}

.order {
  .box {
    width: 96%;
    padding: 20px;
    background: #ffffff;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;

    .title {
      width: 100%;
      display: flex;

      .right {
        flex: 1;

        .el-steps {
          padding: 0 0 20px 0;
          border-bottom: 1px solid #b9b9b9;
        }

        .text {
          width: 100%;
          margin: 10px 0 25px 0;

          .shop {
            width: 100%;
            height: 30px;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #3d3d3d;
            font-weight: bold;
            margin-top: 20px;

            .plat_mes {
              font-size: 14px;
              color: #ababab;
              display: flex;
              align-items: center;
              cursor: pointer;
            }

            .el-icon {
              color: #000000;
              font-size: 20px;
            }
          }

          .time {
            display: inline-block;
            padding: 5px;
            background: #f5f9ff;
            color: #409eff;
          }

          .text1 {
            font-size: 14px;
            color: #ababab;
          }
        }
      }
    }

    .mes {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .info {
        width: 195px;
        font-size: 14px;
        color: #797979;
        margin-top: 15px;
      }

      .addremark {
        display: inline-block;
        color: #116cf8;
        margin-left: 10px;
        font-size: 12px;
      }
    }

    .user_play {
      width: 50%;
      font-size: 14px;

      .box1 {
        width: 3px;
        height: 15px;
        border: 0;
        background: #116cf8;
        margin-right: 10px;
      }

      .name {
        font-weight: bold;
        font-size: 15px;
      }

      .title {
        display: flex;
        border: 0;
        align-items: center;
        font-size: 15px;
        margin-bottom: 15px;

        .box1_other {
          background: #fff;
        }
      }

      .row {
        margin-top: 5px;

        .name1 {
          color: #b8b8b8;
        }
      }
    }

    .head_title {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      font-size: 15px;
      font-weight: bold;

      .box1 {
        width: 3px;
        height: 20px;
        background: #116cf8;
        margin-right: 10px;
      }
    }

    .logistics {
      margin-top: 20px;
    }

    .deposit {
      background: #fff;
      border: 0px;
      color: #409eff;
    }
  }

  .fristbox {
    margin-top: 0px;
  }
}

/**
 * 站台页面
 */
.plateform {
  width: 30%;
  height: 40%;
  position: absolute;
  background: #fff;
  z-index: 99;
  top: 25%;
  left: 35%;

  .mes {
    margin-top: 20px;
    display: flex;
    align-items: center;

    .text {
      display: inline-block;
      width: 60px;
      font-size: 14px;
      color: #6c6c6c;
    }
  }

  .btn {
    width: 150px;
    position: absolute;
    right: 20px;
    bottom: 40px;
  }
}

/**
 *  换货发货页面
 */
.deliver {
  width: 800px;
  height: 60%;
  background: #fff;
  position: absolute;
  z-index: 90;
  top: 20%;
  left: 50%;
  margin-left: -400px;

  .mes_title {
    display: flex;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid #efefef;
  }

  .el-table {
    margin-top: 20px;
  }

  .add_table_name {
    width: 100%;
    border: 1px dotted #84b3fb;
    background: #e7f0fe;
    height: 40px;
    line-height: 40px;
    color: #2075f8;
    font-size: 16px;
    margin-top: 20px;
  }

  .btn_center {
    width: 200px;
    margin: 20px auto;
  }
}

/**
 *  拒绝换货页面
 */
.refuse_change,
.refuse_refund {
  width: 30%;
  height: 30%;
  background: #fff;
  position: absolute;
  z-index: 90;
  top: 35%;
  left: 35%;

  .title_mes {
    font-weight: bold;
  }

  .mes {
    margin-top: 20px;

    .text {
      display: inline-block;
      font-size: 14px;
      color: #6c6c6c;
    }
  }

  .btn {
    width: 200px;
    position: absolute;
    bottom: 20px;
    right: -24px;
  }
}

/**
 *  拒绝售后页面
 */
.refuse_aftersale,
.refund {
  width: 30%;
  height: 30%;
  background: #fff;
  position: absolute;
  z-index: 90;
  top: 35%;
  left: 35%;

  .title_mes {
    font-weight: bold;
  }

  .mes {
    margin-top: 20px;

    .text {
      display: inline-block;
      font-size: 14px;
      color: #6c6c6c;
    }
  }

  .btn {
    width: 200px;
    position: absolute;
    bottom: 20px;
    right: -24px;
  }
}

.refund {
  width: 25%;
  height: 35%;
  background: #fff;
  position: absolute;
  z-index: 90;
  left: 38%;
  top: 32%;
}
</style>
